import React, { Component } from 'react';
import { View, ScrollView } from 'react-native';
import IndexModel from '../models/Index';
import { filterFieldData, formatUrl } from '../utils/extension';

import IndexSwiper from '../components/IndexSwiper';
import MainTitle from '../components/MainTitle';
import RecomCourseList from '../components/RecomCourseList';
import CourseList from '../components/CourseList';
// import MyRefreshControl from '../components/MyRefreshControl';

const indexModel = new IndexModel();

class HomePage extends Component{

  constructor(props) {
    super(props);

    this.state = {
      swiperData: [],
      fieldData: [],
      courseData: [],
      recomCourseData: [],
      //注意： refreshing是一个受控设置所以必须在onRefresh函数中为真，否则加载设置为属性会立即停止。
      isRefreshing: true
    }
  }

  componentDidMount() {
    this.getCourseDatas();
  }

  //暂时写法：gitee图床挂了，改为七牛
  formatDataUrl() {
    const state = this.state;
    //填入需要更改的数据名称
    const dataArray = ['swiperData', 'fieldData', 'courseData', 'recomCourseData'];

    //遍历state里所有的键名
    for (let dataName of dataArray) {
      formatUrl(dataName, state, (data) => {
        this.setState({
          dataName: data
        });
      });
    }
  }

  //数据请求
  getCourseDatas() {
    indexModel.getCourseDatas().then((res) => {
      const data = res.result;

      this.setState({
        swiperData: data.swipers,
        fieldData:  data.fields,
        courseData: data.courses,
        recomCourseData: data.recomCourses
      }, () => {
        //数据格式化处理
        this.formatDataUrl();

        //数据请求完毕时关闭下拉刷新
        if (this.state.isRefreshing) {
          this.setState(
            { isRefreshing: false },
            () => { console.log('下拉刷新完毕,数据重新请求成功') }
          );
        }
      });
    });

  }

  //处理MainTitle组件渲染时使用的title属性
  renderMainTitle(data, title) {
    if (data) {
      return data && <MainTitle title={ data && data.field_name } />
    }
    return <MainTitle title={ title } />
  }

  //处理页面刷新的函数
  onPageRefresh() {
    //判断什么情况时需要刷新下拉
    if (this.state.isRefreshing) {
      //当正在刷新时中止程序执行
      return;
    } 

    //用户触发下拉菜单时,将其他转为正在刷新
    this.setState({ isRefreshing: true });

    //重新请求数据
    this.getCourseDatas();
  }

  render() {

    const { navigation } = this.props;
    
    const {
      swiperData,
      fieldData,
      courseData,
      recomCourseData,
      isRefreshing
    } = this.state;

    /**
     * 备注：
     * automaticallyAdjustContentInsets=false 
     * 可以去除关闭滚动视图放一个导航条的时候会有一个区域的空白
     * 
     * showsVerticalScrollIndicator=false
     * 不显示垂直的滚动条
     * 
     * refreshControl刷新组件, 包括下拉刷新
     */

    return (
      <ScrollView
        automaticallyAdjustContentInsets={false}
        showsVerticalScrollIndicator={false}
        // refreshControl={
        //   <MyRefreshControl
        //     isRefreshing={isRefreshing}
        //     onPageRefresh={this.onPageRefresh.bind(this)}
        //   />
        // }
      >
        {
          swiperData.length !== 0 &&
            <IndexSwiper
              swiperData={swiperData}
              navigation={navigation}
          />
        }
        {/* 推荐课程 */}
        {this.renderMainTitle(null, '推荐课程')}
        <RecomCourseList
          recomCourseData={recomCourseData}
          navigation={navigation}
        />
        {/* 前端高薪就业 */}
        {this.renderMainTitle(fieldData[0], '')}
        <CourseList
          courseData={filterFieldData(courseData, '0', true)}
          navigation={navigation}
        />
        {/* 精品小课 */}
        {this.renderMainTitle(fieldData[1], '')}
        <CourseList
          courseData={filterFieldData(courseData, '1', true)}
          navigation={navigation}
        />
        {/* 前端基础 */}
        {this.renderMainTitle(fieldData[2], '')}
        <CourseList
          courseData={filterFieldData(courseData, '2', true)}
          navigation={navigation}
        />
        {/* 全修班体验课 */}
        {this.renderMainTitle(fieldData[3], '')}
        <CourseList
          courseData={filterFieldData(courseData, '3', true)}
          navigation={navigation}
        />
        </ScrollView>
    );
  }
}

export default HomePage;

